<template>
	<view class="container">
	  <!-- 页面标题 -->
	  <view class="header">
		<text class="title">选择您的会员计划</text>
		<text class="subtitle">解锁更多专业功能，提升投资分析能力</text>
	  </view>
  
	  <!-- 付费周期选择 -->
	  <view class="cycle-select">
		<view class="select-box">
		  <view 
			:class="['cycle-btn', billingCycle === 'monthly' ? 'active' : '']"
			@tap="setBillingCycle('monthly')"
		  >月付</view>
		  <view 
			:class="['cycle-btn', billingCycle === 'yearly' ? 'active' : '']"
			@tap="setBillingCycle('yearly')"
		  >
			年付
			<text class="save-tag">省钱</text>
		  </view>
		</view>
	  </view>
  
	  <!-- 套餐列表 -->
	  <view class="plans-list">
		<view 
		  v-for="(plan, key) in plans" 
		  :key="key"
		  :class="['plan-card', selectedPlan === key ? 'selected' : '']"
		>
		  <!-- 推荐标签 -->
		  <view v-if="key === 'professional'" class="recommend-tag">推荐方案</view>
  
		  <!-- 套餐头部 -->
		  <view class="plan-header">
			<text :class="['iconfont', plan.icon]"></text>
			<text class="plan-name">{{ plan.name }}</text>
			<text class="plan-desc">{{ plan.description }}</text>
		  </view>
  
		  <!-- 价格展示 -->
		  <view class="price-section">
			<view class="price">
			  <text class="symbol">¥</text>
			  <text class="amount">{{ billingCycle === 'yearly' ? plan.yearlyPrice : plan.monthlyPrice }}</text>
			  <text class="unit">/{{ billingCycle === 'yearly' ? '年' : '月' }}</text>
			</view>
			<text v-if="billingCycle === 'yearly'" class="discount">
			  年付优惠 17%
			</text>
		  </view>
  
		  <!-- 功能列表 -->
		  <view class="features-list">
			<view 
			  class="feature-item"
			  v-for="(feature, index) in plan.features"
			  :key="index"
			>
			  <text class="iconfont icon-check"></text>
			  <text class="feature-text">{{ feature }}</text>
			</view>
		  </view>
  
		  <!-- 选择按钮 -->
		  <button 
			:class="['select-btn', selectedPlan === key ? 'current' : '']"
			@tap="selectPlan(key)"
		  >
			{{ selectedPlan === key ? '当前方案' : '选择方案' }}
		  </button>
		</view>
	  </view>
  
	  <!-- 购买说明 -->
	  <view class="notice-box">
		<view class="notice-header">
		  <text class="iconfont icon-info"></text>
		  <text class="notice-title">购买须知：</text>
		</view>
		<view class="notice-list">
		  <text class="notice-item">· 所有套餐支持随时升级</text>
		  <text class="notice-item">· 支持7天无理由退款</text>
		  <text class="notice-item">· 可开具增值税专用发票</text>
		  <text class="notice-item">· 如需企业版定制，请联系客服</text>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		selectedPlan: 'professional',
		billingCycle: 'yearly',
		plans: {
		  basic: {
			name: "基础版",
			description: "适合个人投资者入门使用",
			monthlyPrice: 29,
			yearlyPrice: 288,
			icon: "icon-star",
			features: [
			  "每日10次专利分析",
			  "基础概念板块分析",
			  "新闻要闻查看",
			  "个股基础数据",
			  "7×24小时客服支持"
			]
		  },
		  professional: {
			name: "专业版",
			description: "适合专业投资者深度使用",
			monthlyPrice: 99,
			yearlyPrice: 988,
			icon: "icon-crown",
			features: [
			  "不限次数专利分析",
			  "专业概念板块分析",
			  "AI智能解读",
			  "个股深度分析",
			  "板块关联分析",
			  "专业选股策略",
			  "技术支持优先响应"
			]
		  },
		  enterprise: {
			name: "企业版",
			description: "适合机构投资者团队使用",
			monthlyPrice: 299,
			yearlyPrice: 2988,
			icon: "icon-shield",
			features: [
			  "企业专属服务",
			  "团队账号管理",
			  "高级数据接口",
			  "定制化分析报告",
			  "专属客户经理",
			  "现场技术支持",
			  "量化策略定制"
			]
		  }
		}
	  }
	},
	methods: {
	  setBillingCycle(cycle) {
		this.billingCycle = cycle
	  },
	  selectPlan(plan) {
		this.selectedPlan = plan
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	padding: 30rpx;
	background: #f5f6fa;
	min-height: 100vh;
  }
  
  .header {
	text-align: center;
	margin-bottom: 40rpx;
	padding: 20rpx;
	
	.title {
	  font-size: 40rpx;
	  font-weight: bold;
	  margin-bottom: 16rpx;
	  display: block;
	  color: #333;
	}
	
	.subtitle {
	  font-size: 28rpx;
	  color: #666;
	}
  }
  
  .cycle-select {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
	
	.select-box {
	  background: #f0f0f0;
	  border-radius: 12rpx;
	  padding: 4rpx;
	  display: flex;
	  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	}
	
	.cycle-btn {
	  padding: 16rpx 32rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	  position: relative;
	  transition: all 0.3s;
	  
	  &.active {
		background: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		font-weight: 500;
	  }
	  
	  .save-tag {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #52c41a;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 100rpx;
		box-shadow: 0 2rpx 4rpx rgba(82,196,26,0.2);
	  }
	}
  }
  
  .plan-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	position: relative;
	border: 2rpx solid transparent;
	transition: all 0.3s;
	
	&.selected {
	  border-color: #1890ff;
	  box-shadow: 0 4rpx 12rpx rgba(24,144,255,0.1);
	}
	
	.recommend-tag {
	  position: absolute;
	  top: -24rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  background: #1890ff;
	  color: #fff;
	  font-size: 24rpx;
	  padding: 8rpx 24rpx;
	  border-radius: 100rpx;
	  box-shadow: 0 2rpx 8rpx rgba(24,144,255,0.2);
	}
	
	.plan-header {
	  text-align: center;
	  margin-bottom: 30rpx;
	  
	  .iconfont {
		font-size: 80rpx;
		color: #1890ff;
		margin-bottom: 20rpx;
		display: block;
	  }
	  
	  .plan-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	  }
	  
	  .plan-desc {
		font-size: 26rpx;
		color: #666;
	  }
	}
	
	.price-section {
	  text-align: center;
	  margin-bottom: 30rpx;
	  
	  .price {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 8rpx;
		
		.symbol {
		  font-size: 32rpx;
		  font-weight: bold;
		  color: #333;
		}
  
		.amount {
		  font-size: 56rpx;
		  font-weight: bold;
		  color: #333;
		  margin: 0 8rpx;
		}
		
		.unit {
		  font-size: 26rpx;
		  color: #999;
		}
	  }
	  
	  .discount {
		font-size: 24rpx;
		color: #52c41a;
		background: rgba(82,196,26,0.1);
		padding: 4rpx 16rpx;
		border-radius: 100rpx;
	  }
	}
	
	.features-list {
	  margin-bottom: 30rpx;
	  
	  .feature-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		.iconfont {
		  font-size: 32rpx;
		  color: #52c41a;
		  margin-right: 12rpx;
		}
		
		.feature-text {
		  font-size: 28rpx;
		  color: #666;
		}
	  }
	}
	
	.select-btn {
	  width: 100%;
	  height: 80rpx;
	  border-radius: 8rpx;
	  font-size: 30rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: #f5f5f5;
	  color: #666;
	  
	  &.current {
		background: #1890ff;
		color: #fff;
	  }
	}
  }
  
  .notice-box {
	background: #e6f7ff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-top: 40rpx;
	
	.notice-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 16rpx;
	  
	  .iconfont {
		font-size: 32rpx;
		color: #1890ff;
		margin-right: 8rpx;
	  }
	  
	  .notice-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #1890ff;
	  }
	}
	
	.notice-list {
	  .notice-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.8;
		display: block;
	  }
	}
  }
  </style>